<template>
  <div>
    <div class="group-field" v-for="(item, index) in innerDataSource" :key="item.id">
      <RowWrapper class="group-field-row">
        <div class="group-field-row-button-container">
          <div class="button" @click="() => addNew(index)">
            <a-icon type="plus"/>
          </div>
          <div class="button" style="margin-bottom: 0" @click="() => remove(index)">
            <a-icon type="minus"/>
          </div>
        </div>
        <RowAttribute style="flex: 0.5" :label-width="labelWidth" label="如果">
          <FormulaTextAreaConfig
            style="flex: 0.5"
            :variableContainerConfig="variableContainerConfig" :formDefinition="formDefinition"
            v-model="item.ifFormula" :title="item.ifFormulaTitle"
            @update:title="t => item.ifFormulaTitle = t"/>
        </RowAttribute>

        <RowAttribute style="flex: 0.5" label-width="80px" label="则为">
          <FormulaTextAreaConfig
            style="flex: 0.5"
            :variableContainerConfig="variableContainerConfig" :formDefinition="formDefinition"
            v-model="item.thenFormula" :title="item.thenFormulaTitle"
            @update:title="t => item.thenFormulaTitle = t"/>
        </RowAttribute>
      </RowWrapper>

      <RowWrapper v-show="index === innerDataSource.length - 1" class="group-field-row"
                  style="justify-content: end; padding-left: 30px">
        <RowAttribute style="flex: 0.5" label-width="80px" label="否则为">
          <FormulaTextAreaConfig
            style="flex: 0.5"
            :variableContainerConfig="variableContainerConfig" :formDefinition="formDefinition"
            v-model="item.elseFormula" :title="item.elseFormulaTitle"
            @update:title="t => item.elseFormulaTitle = t"/>
        </RowAttribute>
      </RowWrapper>
    </div>
  </div>
</template>
<script>
import {createModelForVue, createProps} from '@/utils';
import {createFormDefinition, createFormulaGroup} from '@comp/hhd/design/FormDesigner/types';
import RowAttribute from '@comp/hhd/layout/RowAttribute.vue';
import RowWrapper from '@comp/hhd/layout/RowWrapper.vue';
import FormulaTextAreaConfig
  from '@comp/hhd/design/FormDesigner/field/comps/form/FieldValueFormulaGroups/configs/FormulaTextAreaConfig.vue';

export default {
  name: 'GroupFieldValueFormulaConfig',
  components: {FormulaTextAreaConfig, RowAttribute, RowWrapper},
  model: createModelForVue('dataSource'),
  props: {
    variableContainerConfig: createProps(Object),
    formDefinition: createProps(Object, createFormDefinition),
    dataSource: createProps(Array, undefined)
  },
  data() {
    return {
      labelWidth: '50px'
    };
  },
  methods: {
    addNew(index) {
      let res = createFormulaGroup();
      if (this.dataSource.length && index === this.dataSource.length - 1) {
        res.elseFormula = this.dataSource[this.dataSource.length - 1].elseFormula;
        res.elseFormulaTitle = this.dataSource[this.dataSource.length - 1].elseFormulaTitle;

        this.dataSource[this.dataSource.length - 1].elseFormula = undefined
        this.dataSource[this.dataSource.length - 1].elseFormulaTitle = undefined
      }
      this.dataSource.splice(index + 1, 0, res);
    },
    remove(index) {
      this.dataSource.splice(index, 1);
      this.$emit('change', [...this.dataSource]);
    },
  },
  computed: {
    innerDataSource: {
      get() {
        let res = this.dataSource || [createFormulaGroup()];
        if (!this.dataSource || !this.dataSource.length) {
          res = [createFormulaGroup()];
          this.$emit('change', res);
        }
        return res;
      },
      set(v) {
        this.$emit('change', v);
      },
    }
  }
};
</script>
<style>
.group-field .group-field-row {
  display: flex;
  height: fit-content;
  padding-right: 10px;
}

.group-field-row-button-container .button {
  width: 20px;
  height: 20px;
  font-size: 15px;
  color: white !important;
  background: #296fbe;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-bottom: 25px;
  border-radius: 2px;
}

.field-action-formula-item {
  display: flex;
  align-items: center;
}

.group-field-row-button-container {
  width: 30px;
  text-align: center;
}

.group-field {
}
</style>